<template>
  <el-form :model="forForm" :inline="true" size="small" class="custom-scrollbar">
    <el-form-item label="" class="!w-100px">
      <el-select v-model="forForm.type">
        <el-option label="次数" value="次数" />
        <el-option label="while" value="while" />
        <el-option label="forEach" value="forEach" />
      </el-select>
    </el-form-item>
    <!-- 次数 -->
    <el-form-item label="" v-if="forForm.type == '次数'" class="!w-200px">
      <el-input v-model="forForm.count">
        <template #prepend>次数:</template>
      </el-input>
    </el-form-item>
    <el-form-item label="" v-if="forForm.type == 'while'" class="!w-100px">
      <el-select v-model="forForm.condition">
        <el-option label="条件" value="条件" />
        <el-option label="表达式" value="表达式" />
      </el-select>
    </el-form-item>
    <el-form-item label="" v-if="forForm.type == 'while' && forForm.condition == '条件'" class="!w-100px">
      <el-input v-model="forForm.var" placeholder="变量名称${var}" />
    </el-form-item>
    <el-form-item label="" v-if="forForm.type == 'while' && forForm.condition == '条件'" class="!w-100px">
      <el-select v-model="forForm.compare">
        <el-option label="等于" value="等于" />
        <el-option label="不等于" value="不等于" />
        <el-option label="大于" value="大于" />
        <el-option label="小于" value="小于" />
        <el-option label="大于等于" value="大于等于" />
        <el-option label="小于等于" value="小于等于" />
        <el-option label="包含" value="包含" />
        <el-option label="不包含" value="不包含" />
        <el-option label="空" value="空" />
        <el-option label="非空" value="非空" />
      </el-select>
    </el-form-item>
    <el-form-item label="" v-if="forForm.type == 'while' && forForm.condition == '条件'" class="!w-100px">
      <el-input v-model="forForm.value" placeholder="变量值" />
    </el-form-item>
    <el-form-item label="" v-if="forForm.type == 'while' && forForm.condition == '表达式'" class="!w-250px">
      <el-input v-model="forForm.expression" placeholder="表达式" />
    </el-form-item>
    <el-form-item label="" v-if="forForm.type == 'while'" class="!w-200px">
      <el-input v-model="forForm.time">
        <template #prepend>超时(ms)</template>
      </el-input>
    </el-form-item>
    <el-form-item label="" v-if="forForm.type == 'forEach'" class="!w-100px">
      <el-input v-model="forForm.name" placeholder="变量名" />
    </el-form-item>
    <el-form-item label="" v-if="forForm.type == 'forEach'" class="!w-10px">
      in
    </el-form-item>
    <el-form-item label="" v-if="forForm.type == 'forEach'" class="!w-100px">
      <el-input v-model="forForm.pre" placeholder="变量前缀" />
    </el-form-item>
    <el-form-item label="" v-if="forForm.type == '次数' || (forForm.type == 'forEach')" class="!w-200px">
      <el-input v-model="forForm.interval">
        <template #prepend>间隔(ms):</template>
      </el-input>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
const forForm = reactive({
  type: '次数',
  count: '',
  interval: '',
  condition: '条件',
  var: '',
  compare: '等于',
  value: '',
  time: '',
  expression: '',
  name: '',
  pre: ''
})
</script>

<style scoped></style>
